<template>
  <div class="main-box">
    <van-row justify="center" class="mb-10 white-bg h-40">
      <van-col span="12" class="flex-center">
        <van-icon name=" iconfont icon-hongbao2" class="red fs-20" />
        &nbsp;累计红包数: {{ redNumber }} 个
      </van-col>
      <van-col span="12" class="flex-center">
        <van-icon name=" iconfont icon-jinbi" class="yellow fs-20" />
        &nbsp;累计金额: {{ cumulativeAmount }} 元
      </van-col>
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in list" :key="item.packetId" class="list-item">
          <div class="flex-center w100b">
            <div class="img-list">
              <span class="red">{{ item.packetTypeText }}&nbsp;&nbsp;</span>
              <van-image
                v-for="(it, index) in item.receiveList"
                :key="index"
                round
                fit="cover"
                width="5vw"
                height="5vw"
                :src="it.receiveUserAvatar"
              />
            </div>
            <div class="flex-blank">&nbsp;</div>
            <span class="red">{{ item.actualMoney }}</span>
          </div>
          <p class="lh-1 fs-12 gray-9 mt-5">{{ item.openTime }}</p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue';
import { List, PullRefresh, Tab, Tabs, Cell, Icon, Row, Col, Image as VanImage } from 'vant';
import { totalMyReceive, pageMyReceive } from '@/api/activity';

const packetTypeMap = {
  new: '新人红包',
  invite: '邀请红包',
  old: '老用户红包',
};
export default {
  name: 'PacketList',
  components: {
    [Col.name]: Col,
    [Row.name]: Row,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
    [List.name]: List,
    [VanImage.name]: VanImage,
    [PullRefresh.name]: PullRefresh,
  },
  props: {
    activityId: String,
  },
  setup(props, context) {
    const state = reactive({
      cumulativeAmount: 0,
      redNumber: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    });
    const searchObj = reactive({
      activityId: props.activityId,
      pageNum: 1,
      pageSize: 10,
    });
    const onLoad = async () => {
      if (state.refreshing) {
        // 下拉刷新
        state.list = [];
        searchObj.pageNum = 1;
        state.refreshing = false;
      } else if (state.list.length > 0) {
        //上拉加载更多
        searchObj.pageNum++;
      }
      const res = await pageMyReceive(searchObj);
      state.loading = false;
      if (res.code === 200) {
        res.total = Number(res.total);
        res.pageNum = Number(res.pageNum);
        res.pageSize = Number(res.pageSize);
        let arr = (res.rows || []).map((x) => ({
          ...x,
          packetTypeText: packetTypeMap[x.packetType],
        }));
        if (!state.list.length) {
          state.list = arr;
        } else {
          state.list = state.list.concat(arr);
        }
        if (res.total >= state.list.length) {
          state.finished = true;
        }
      }
    };
    const onRefresh = async () => {
      state.finished = false;
      state.loading = true;
      onLoad();
    };

    const getMyInviteCount = async () => {
      const res = await totalMyReceive(props.activityId);
      if (res.code === 200) {
        state.cumulativeAmount = res.data.cumulativeAmount;
        state.redNumber = res.data.redNumber;
      }
    };
    onMounted(() => {
      getMyInviteCount();
      onRefresh();
    });

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      getMyInviteCount,
    };
  },
};
</script>
<style lang="less" scoped>
.img-list {
  display: inline-flex;
  align-items: center;

  :deep(.van-image) {
    margin-left: -1vw;
    border: solid 1px #fff;
  }
}
.list-item {
  //background: #f84941;
  background: #ffffff;
  padding: 10px;
  margin-bottom: 10px;
}
.list-item:last-child {
  margin-bottom: 0;
}
</style>
